<template>
  <div class="home">
    <!-- 轮播图 -->
    <el-carousel class="home-carousel" indicator-position="outside" height="500px">
      <el-carousel-item v-for="(item, k) in bannerArr" :key="k">
        <el-image style="width: 100%" :src="item.banner"></el-image>
      </el-carousel-item>
    </el-carousel>
    <!-- 装修流程 -->
    <el-row class="home-entries">
      <el-col :span="16" :offset="4" class="home-entries-renovation">
        <el-card
          v-for="(item, k) in entriesData"
          :key="k"
          shadow="hover"
          class="home-entries-renovation-item"
        >
          <el-image style="width: 100%" :src="item.url"></el-image>
        </el-card>
      </el-col>
      <el-col :span="24" class="home-entries-yzs"> </el-col>
    </el-row>
    <!-- 服务流程 -->
    <el-row class="home-fwlc">
      <el-col :span="24">
        <div class="common">
          <h2 class="common-title">
            <span class="common-title-before"></span>
            <a href="#">服务流程</a>
            <span class="common-title-after"></span>
          </h2>
          <span class="common-description"></span>
        </div>
      </el-col>
      <el-col :span="20" :offset="2" class="fwlc-process-box">
        <el-steps :active="7" class="stepsStyle" align-center>
          <el-step>
            <template #title>
              <div class="index-icon icon-zxyy"></div>
              <div style="font-size: 18px; font-weight: 500">在线预约</div>
            </template>
            <template #description>
              <div style="color: #999999">登记联系方式</div>
            </template>
          </el-step>
          <el-step>
            <template #title>
              <div class="index-icon icon-lf"></div>
              <div style="font-size: 18px; font-weight: 500">量房沟通</div>
            </template>
            <template #description>
              <div style="color: #999999">装修公司免费量房设计</div>
            </template>
          </el-step>
          <el-step>
            <template #title>
              <div class="index-icon icon-fa"></div>
              <div style="font-size: 18px; font-weight: 500">对比方案</div>
            </template>
            <template #description>
              <div style="color: #999999">对比装修公司方案</div>
            </template>
          </el-step>
          <el-step>
            <template #title>
              <div class="index-icon icon-ht"></div>
              <div style="font-size: 18px; font-weight: 500">签订合同</div>
            </template>
            <template #description>
              <div style="color: #999999">签订合同及托管装修款</div>
            </template>
          </el-step>
          <el-step>
            <template #title>
              <div class="index-icon icon-sg"></div>
              <div style="font-size: 18px; font-weight: 500">装修施工</div>
            </template>
            <template #description>
              <div style="color: #999999">工人按排期施工交付</div>
            </template>
          </el-step>
          <el-step>
            <template #title>
              <div class="index-icon icon-ys"></div>
              <div style="font-size: 18px; font-weight: 500">竣工验收</div>
            </template>
            <template #description>
              <div style="color: #999999">验收通过全屋装修指标</div>
            </template>
          </el-step>
          <el-step>
            <template #title>
              <div class="index-icon icon-bz"></div>
              <div style="font-size: 18px; font-weight: 500">享受保障</div>
            </template>
            <template #description>
              <div style="color: #999999">享受合同约定质保</div>
            </template>
          </el-step>
        </el-steps>
      </el-col>
    </el-row>
    <!-- 效果图 -->
    <el-row class="home-xgt">
      <el-col :span="24">
        <div class="common">
          <h2 class="common-title">
            <span class="common-title-before"></span>
            <a href="#">效果图</a>
            <span class="common-title-after"></span>
          </h2>
          <span class="common-description"> 搜索海量无锡装修家居美图，发现新家装修灵感 </span>
          <div class="common-navbar">
            <el-breadcrumb separator="/">
              <!-- <el-breadcrumb-item :to="{ path: '/' }">现代简约</el-breadcrumb-item> -->
              <el-breadcrumb-item><a href="/">现代简约</a></el-breadcrumb-item>
              <el-breadcrumb-item><a href="/">奶油风</a></el-breadcrumb-item>
              <el-breadcrumb-item>北欧风</el-breadcrumb-item>
              <el-breadcrumb-item>新中式</el-breadcrumb-item>
              <el-breadcrumb-item>全部美图></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </el-col>
      <el-col :span="20" :offset="2" class="home-xgt-waterfall">
        <el-image
          v-for="(item, k) in security"
          :key="k"
          style="width: 100%; margin-bottom: 10px"
          :src="item.src"
        ></el-image>
      </el-col>
    </el-row>
    <!-- 看攻略 -->
    <el-row class="home-kgl">
      <el-col :span="20" :offset="2" class="kgl">
        <div class="common">
          <h2 class="common-title">
            <span class="common-title-before"></span>
            <a href="#">看攻略</a>
            <span class="common-title-after"></span>
          </h2>
          <span class="common-description">
            学习装修经验与交流无锡装修相关问题，小白晋级达人就靠它
          </span>
        </div>
        <div class="kgl-content">
          <el-row :gutter="20">
            <el-col
              v-for="(item, k) in strategy"
              :key="k"
              :xs="24"
              :sm="12"
              :md="12"
              :lg="6"
              :xl="6"
              style="margin-bottom: 20px"
            >
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <img :src="item.image" class="image" />
                <div class="kgl-content-box">
                  <div class="kgl-content-title">
                    <el-link
                      v-for="(_item, k) in item.list"
                      :key="k"
                      class="kgl-content-title-bottom"
                      :underline="false"
                      >{{ _item.title }}</el-link
                    >
                  </div>
                  <div class="kgl-content-bottom">
                    <el-button text class="button"><svg-icon :name="'guide'"></svg-icon></el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 底部banner图 -->
    <el-row class="footer-banner">
      <el-col :span="7" :offset="1" class="banner-slogan">
        <p class="banner-slogan-top">九五装饰专注装修10年</p>
        <p class="banner-slogan-bottom">始终为客户创造价值</p>
      </el-col>
      <el-col :span="11" :offset="4"> </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import SvgIcon from '../../components/svgIcon.vue'
const bannerArr = reactive([
  { banner: new URL(`/src/assets/images/${'banner1'}.jpg`, import.meta.url).href },
  { banner: new URL(`/src/assets/images/${'banner2'}.jpg`, import.meta.url).href },
  { banner: new URL(`/src/assets/images/${'banner3'}.jpg`, import.meta.url).href }
])
const entriesData = reactive([
  { url: new URL(`/src/assets/images/${'entries1'}.jpg`, import.meta.url).href },
  { url: new URL(`/src/assets/images/${'entries2'}.jpg`, import.meta.url).href },
  { url: new URL(`/src/assets/images/${'entries3'}.jpg`, import.meta.url).href },
  { url: new URL(`/src/assets/images/${'entries4'}.jpg`, import.meta.url).href }
])
const security = reactive([
  { src: new URL(`/src/assets/images/2023-11-21/${'1'}.jpeg`, import.meta.url).href },
  { src: new URL(`/src/assets/images/2023-11-21/${'2'}.jpeg`, import.meta.url).href },
  { src: new URL(`/src/assets/images/2023-11-21/${'3'}.jpeg`, import.meta.url).href },
  { src: new URL(`/src/assets/images/2023-11-21/${'7'}.jpeg`, import.meta.url).href },
  { src: new URL(`/src/assets/images/2023-11-21/${'8'}.jpeg`, import.meta.url).href }
  // { url: new URL(`/src/assets/images/2023-11-21/${'6'}.jpeg`, import.meta.url).href},
])
const strategy = reactive([
  {
    image: new URL(`/src/assets/images/${'index_kgl_zxgl'}.png`, import.meta.url).href,
    list: [
      { title: '防止吃亏你得知道：装修前...', href: '' },
      { title: '二手房装修注意事项(附完整二手房装修流程)', href: '' },
      { title: '自己怎么装修房子省钱', href: '' },
      { title: '家庭装修材料清单表', href: '' },
      { title: '工薪家庭装修省钱4大原则 你得知道!', href: '' },
      { title: '卫生间室内防水的技巧具体都有哪些', href: '' }
    ]
  },
  {
    image: new URL(`/src/assets/images/${'index_kgl_zxrj'}.png`, import.meta.url).href,
    list: [
      { title: '丑小鸭变小天鹅', href: '' },
      { title: '家是理想的港湾', href: '' },
      { title: '狐猴小格调', href: '' },
      { title: '张先森落户无锡记～', href: '' },
      { title: '偶要开始装修啦', href: '' },
      { title: '无锡龙湖滟澜香颂 从选公司到完工艰辛历程', href: '' }
    ]
  },
  {
    image: new URL(`/src/assets/images/${'index_kgl_zxwd'}.png`, import.meta.url).href,
    list: [
      { title: '我想在我两居室的房子里设计出一个简易的衣帽间，可', href: '' },
      { title: '卫生间防水装修时要注意一些什么?', href: '' },
      { title: '真火壁炉安装安装方法是什么', href: '' },
      { title: '浴霸选择风暖还是灯暖', href: '' },
      { title: '有没有大佬知道华艺灯饰壁灯好不好的', href: '' },
      { title: '圣诞节门口挂件怎么做？', href: '' }
    ]
  },
  {
    image: new URL(`/src/assets/images/${'index_kgl_zxgj'}.png`, import.meta.url).href,
    list: [
      { title: '2023装修吉日', href: '' },
      { title: '2023入住吉日?', href: '' }
    ]
  }
])
</script>
<style lang="scss">
// @include b(kgl){
//   color: red;
// }
.home {
  width: 100%;
  // 轮播图
  .home-carousel {
    width: 100%;
    // height: calc(100vh - 80px);
  }
  // 1装修流程 2服务流程 3效果图 4看攻略
  // 标题
  .home-entries,
  .home-fwlc,
  .home-xgt,
  .home-kgl {
    // 常用标题
    .common {
      display: flex;
      flex-direction: column;
      align-items: center;
      // 常用标题
      .common-title {
        height: 45px;
        line-height: 45px;
        font-size: 34px;
        font-weight: 500;
        margin: 5px;
        a {
          color: #333;
          text-decoration: none;
        }
        .common-title-after,
        .common-title-before {
          display: inline-block;
          width: 57px;
          height: 1px;
          margin: 0 26px;
          background-color: #d8d8d8;
          vertical-align: middle;
        }
      }
      // 常用描述
      .common-description {
        display: block;
        padding: 6px 0;
        font-size: 14px;
        color: #999 !important;
      }
      // 常用导航头
      .common-navbar {
        padding-top: 26px;
        padding-bottom: 30px;
        font-size: 14px;
        // width: 50%;
        a {
          font-size: 14px;
          color: #333;
        }
        a:hover {
          color: #f44336;
        }
      }
    }
    // 1装修流程
    .home-entries-renovation {
      padding-bottom: 50px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      .home-entries-renovation-item {
        width: 24%;
      }
    }
    .home-entries-yzs {
      height: 500px;
      background-image: url('@/assets/images/yzs_bg.jpg');
      background-size: cover;
      background-position: center;
      // background-size: cover;
      // background-repeat: no-repeat;
      // height: 100px;
    }
    // 2服务流程
    .fwlc-process-box {
      padding: 10px 0px;
      margin-bottom: 50px;
      .stepsStyle {
        width: 100%;
        .index-icon {
          background-image: url('@/assets/images/index_bg_s.png');
          background-image: -webkit-image-set(
            url('@/assets/images/index_bg_s.png') 1x,
            url('@/assets/images/index_bg_s.png') 2x
          );
          background-repeat: no-repeat;
        }
        .icon-zxyy {
          width: 41px;
          height: 51px;
          background-position: -380px -108px;
        }
        .icon-lf {
          width: 54px;
          height: 46px;
          margin-top: 5px;
          background-position: -380px -56px;
        }
        .icon-fa {
          width: 60px;
          height: 51px;
          background-position: -381px 0;
        }
        .icon-ht {
          width: 50px;
          height: 51px;
          background-position: -312px -168px;
        }
        .icon-sg {
          width: 54px;
          height: 45px;
          margin-top: 6px;
          background-position: -312px -116px;
        }

        .icon-ys {
          width: 57px;
          height: 49px;
          margin-top: 2px;
          background-position: -312px 0;
        }
        .icon-bz {
          width: 46px;
          height: 51px;
          background-position: -312px -56px;
        }
        .el-step__title.is-process,
        .el-step__title.is-wait {
          color: #333333 !important;
        }
        .el-step__head.is-process,
        .el-step__heads.is-wait {
          .el-step__icon.is-text {
            //这里设置的是下一步和等待状态里的文字颜色
            color: #c0c4cc !important;
            border-color: #c0c4cc !important;
          }
        }
        .el-step__head.is-finish {
          color: #a3a3a3 !important;
          .el-step__icon.is-text {
            //这里设置的是已完成状态里的文字颜色
            color: #a3a3a3 !important;
            border-color: #a3a3a3 !important;
          }
        }
        .el-step__title.is-finish {
          color: #333333 !important;
          padding-top: 10px;
          display: flex !important;
          justify-content: center !important;
          flex-direction: column !important;
          align-items: center !important;
        }
        .el-step.is-center .el-step__description {
          padding-left: 1%;
          padding-right: 1%;
        }
        .el-step__title {
          line-height: 35px;
        }
        .el-step__line-inner {
          //这里设置的是完成后过渡线条颜色
          border-color: #a3a3a3 !important;
        }
        .el-step__head.is-success,
        .el-step__title.is-success {
          //这里设置的是完成后的颜色
          color: #a3a3a3 !important;
        }
        .el-step__description.is-finish {
          //这里设置的是描述文字颜色
          border-color: #a3a3a3 !important;
        }
      }
    }
    // 3效果图 - 瀑布流
    .home-xgt-waterfall {
      column-count: 3; // 列的个数为4
      // column-width: 200px; // 宽度200px
      column-gap: 10px; // 列之间间隔2px
      // border: 1px solid red;
      // img {
      //     width: 100%;
      // }
    }
    // 4看攻略
    .kgl-content {
      // padding: 0 20px;
      margin-top: 60px;
      .image {
        width: 100%;
        display: block;
      }
      .kgl-content-box {
        padding: 15px;
        height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .kgl-content-title {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .kgl-content-title-bottom {
            padding: 3px 0px;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            .el-link__inner {
              display: inline !important;
            }
          }
          .el-link {
            display: inline;
          }
        }
        .kgl-content-bottom {
          margin-top: 13px;
          line-height: 12px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
  }
  // 1装修流程 3效果图
  .home-entries,
  .home-xgt {
    padding-top: 60px;
    background-color: #f5f5f5;
  }
  //
  // 2服务流程 4看攻略
  .home-fwlc,
  .home-kgl {
    padding-top: 60px;
    // padding-bottom: 15px;
    background-color: #fff;
  }
  // 底部banner图
  .footer-banner {
    height: 220px;
    background-image: url('@/assets/images/index_data_bg.jpg');
    background-size: cover;
    background-position: center;
    .banner-slogan {
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        margin: 5px;
        color: #fff;
      }
      .banner-slogan-top {
        top: 54px;
        left: 160px;
        font-size: 23px;
        font-weight: 700;
      }
      .banner-slogan-bottom {
        top: 90px;
        left: 160px;
        font-size: 17px;
      }
    }
  }
}
</style>
